<template>
  <div class="total-container">
    <div class="bar1">
      <div class="song-container">
        <div
          v-bind:class="{ 'music-player-container': true, 'is-playing': zhuan }"
        >
          <div class="album">
            <div
              class="album-art"
              :style="{
                'background-image': `url(${attachImageUrl(songPic)})`,
              }"
            ></div>
            <div
              class="vinyl"
              :style="{
                'background-image': `url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/83141/vinyl.png'),url(${attachImageUrl(
                  songPic
                )})`,
              }"
            ></div>
          </div>
        </div>
        <ul class="song-info">
          <li>歌手：{{ singerName }}</li>
          <li>歌曲：{{ songTitle }}</li>
        </ul>
      </div>
      <div class="container">
        <div class="lyric-container">
          <div class="song-lyric">
            <transition-group name="lyric-fade">
              <ul
                :style="{ top: lrcTop }"
                class="has-lyric"
                v-if="lyricArr.length"
                key="has-lyric"
              >
                <li v-for="(item, index) in lyricArr" :key="index">
                  {{ item[1] }}
                </li>
              </ul>

              <div v-else class="no-lyric" key="no-lyric">
                <span>暂无歌词</span>
              </div>
            </transition-group>
          </div>
        </div>
      </div>
    </div>
    <div class="bar2">
      <div class="down">
        <comment :playId="songId" :type="0"></comment>
      </div>
      <div class="likeList">
        <P class="song-title">相似歌曲</P>
        <song-list :songList="similarSong"></song-list>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  computed,
  defineComponent,
  ref,
  watch,
  onBeforeMount,
  onMounted,
} from "vue";
import { useStore } from "vuex";
import Comment from "@/components/Comment.vue";
import { parseLyric } from "@/utils";
import { HttpManager } from "@/api";
import SongList from "@/components/SongList.vue";

export default defineComponent({
  components: {
    Comment,
    SongList,
  },
  setup() {
    const store = useStore();

    const lrcTop = ref("80px"); // 歌词滑动
    const lyricArr = ref([]); // 当前歌曲的歌词
    const songId = computed(() => store.getters.songId); // 歌曲ID
    const lyric = computed(() => store.getters.lyric); // 歌词
    const currentPlayList = computed(() => store.getters.currentPlayList); // 存放的音乐
    const currentPlayIndex = computed(() => store.getters.currentPlayIndex); // 当前歌曲在歌曲列表的位置
    const curTime = computed(() => store.getters.curTime);
    const songTitle = computed(() => store.getters.songTitle); // 歌名
    const singerName = computed(() => store.getters.singerName); // 歌手名
    const songPic = computed(() => store.getters.songPic); // 歌曲图片
    const similarSong = ref([]);
    const zhuan = computed(() => store.getters.isPlay);

    watch(songId, async () => {
      lyricArr.value = parseLyric(
        currentPlayList.value[currentPlayIndex.value].lyric
      );
    });

    onMounted(async () => {
      const result = (await HttpManager.getSimilarSong(
        songId.value
      )) as ResponseBody;
      similarSong.value = result.data;
      console.log("相似的歌曲是" + similarSong.value);
    });

    // 处理歌词位置及颜色
    watch(curTime, () => {
      if (lyricArr.value.length !== 0) {
        for (let i = 0; i < lyricArr.value.length; i++) {
          if (curTime.value >= lyricArr.value[i][0]) {
            for (let j = 0; j < lyricArr.value.length; j++) {
              (
                document.querySelectorAll(
                  ".has-lyric li"
                ) as NodeListOf<HTMLElement>
              )[j].style.color = "#000";
              (
                document.querySelectorAll(
                  ".has-lyric li"
                ) as NodeListOf<HTMLElement>
              )[j].style.fontSize = "14px";
            }
            if (i >= 0) {
              lrcTop.value = -i * 30 + 50 + "px";
              (
                document.querySelectorAll(
                  ".has-lyric li"
                ) as NodeListOf<HTMLElement>
              )[i].style.color = "#95d2f6";
              (
                document.querySelectorAll(
                  ".has-lyric li"
                ) as NodeListOf<HTMLElement>
              )[i].style.fontSize = "18px";
            }
          }
        }
      }
    });

    lyricArr.value = lyric.value ? parseLyric(lyric.value) : [];

    return {
      zhuan,
      similarSong,
      songPic,
      singerName,
      songTitle,
      lrcTop,
      lyricArr,
      songId,
      HttpManager,
      attachImageUrl: HttpManager.attachImageUrl,
    };
  },
});
</script>

<style lang="scss" scoped>
@import "@/assets/css/Lyric.scss";
</style>
